// *{
//   border: solid;
// }

$L: 320px;
$T: 220px;

body
{
  margin: 0;
  padding: 0;
  background-color: black;

  display: flex;
  justify-content: center;
  align-items: center;

  height: 100vh;

  div
  {
    width:  50%;
    height: auto;
  }

  #text
  {
    color: white;
    text-transform: uppercase;
    font-size: 4rem;
    text-align: center;
    letter-spacing: 1rem;

    &::before
    {
      content: attr(data-text);
      color: #ff00c1;
      width:  50%;
      z-index: -1;
      position: absolute;
      left: 320px;
      top: 220px;
      animation: glitch-effect 3s infinite;
    }
    &::after
    {
      content: attr(data-text);
      color: #3498db;
      width:  50%;
      z-index: -2;
      position: absolute;
      left: 320px;
      top:220px;
      animation: glitch-effect 2s infinite;
    }
    @keyframes glitch-effect {
      0%
      {
        left: $L+(-2px);
        top: $T+(-2px);
      }
      25%
      {
        left: $L+2px;
        top: $T;
      }
      50%
      {
        left: $L+(-1px);
        top: $T+2px;
      }
      75%
      {
        left: $L+(-1px);
        top: $T+(-1px);
      }
      100%
      {
        left: $L;
        top: $T+(-2px);
      }
    }
  }
}





